<template>
  <!--pages/my/set.wxml-->

  <view class="index-box">
    <!--index.wxml-->
    <!-- <image src="../../assets/boss/1.png"> </image>
    <image src="../../assets/boss/2.png"> </image>
    <image src="../../assets/boss/3.png"> </image>
    <image src="../../assets/boss/4.png"> </image>
    <image src="../../assets/boss/6.png"> </image>
    <image src="../../assets/boss/7.png"> </image>
    <image src="../../assets/boss/8.png"> </image> -->
    <!-- <image src="../../assets/boss/5.png"> </image> -->

    <swiper
      class="swiperClass"
      interval="2000"
      duration="1000"
      easing-function='easeInCubic'
     
      :circular="true"
      bindchange="bindchange"
      style="height: 650rpx"
      :current="currentIndex"
      @change="pagechange"
    >
      <block v-for="(item, index) in imageList" :key="index">
        <swiper-item>
          <view style="height: 650rpx; width: 100%">
            <view class="Ztext">{{ item.name }}</view>
            <image
              :src="item.image"
              :class="['slide-image', ]"
              mode="aspectFill"
            >
            </image>
            <van-transition :show="index==currentIndex" name="fade-down" custom-class="block">
              <view class="Xtext">111000W</view>
            </van-transition>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <view class="Buttonlist">
   
      <view class="Btext">选择报表类型</view>
      <view class="Blist">
        <block v-for="(item, index) in imageList" :key="index">
          <van-tag
            :plain="true"
            :type="currentIndex == index ? 'danger' : 'primary'"
            size="large"
            @tap="click(index)"
            >{{ item.name }}</van-tag
          >
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { boss } from '@api/rests';
export default {
  data() {
    return {
      show:true,
      imageList: [
        { name: '营收总金额', image: '../../assets/boss/1.png' },
        { name: '未到账金额', image: '../../assets/boss/2.png' },
        { name: '服务费总额', image: '../../assets/boss/3.png' },
        { name: '已到账金额', image: '../../assets/boss/4.png' },
        { name: '逾期单位数', image: '../../assets/boss/5.png' },
        { name: '逾期总额', image: '../../assets/boss/6.png' },
        { name: '客户单位总数', image: '../../assets/boss/7.png' },
        { name: '在职员工总数', image: '../../assets/boss/8.png' },
      ],
      gongsi: '',
      yszje: '',
      wdzje: '',
      fwfze: '',
      dzje: '',
      yqdws: '',
      yqze: '',
      khdwzs: '',
      zzyg: '',
      chooseSize: false,
      animationData: {},
      touchS: [0, 0],
      touchE: [0, 0],
      currentIndex: 0,
      swiperIndex: 0, //这里不写第一次启动展示的时候会有问题
    };
  },
  methods: {
    leave(){
      this.show=false
      this.show=true
      console.log(this.show,'我离开了')
    },
    click(index) {
      this.currentIndex = index;
    },
    pagechange(e) {
      this.currentIndex = e.detail.current;
    },
  },
  watch:{
    currentIndex(n,o){
      this.show=false
      //  setTimeout(()=>{
      //    this.show=true
      //  },1000)
    }
  },
  created() {
    // let a =require("../../assets/boss")
    // console.log(a,'这是图片')
    boss().then((res) => {
      console.log(res, 'boss信息');
      this.gongsi = res.data.gongsi;
      this.yszje = res.data.gongsi;
      this.wdzje = res.data.gongsi;
      this.fwfze = res.data.gongsi;
      this.dzje = res.data.gongsi;
      this.yqdws = res.data.gongsi;
      this.yqze = res.data.gongsi;
      this.khdwzs = res.data.gongsi;
      this.zzyg = res.data.gongsi;
    });
  },
};
</script>

<style lang="less">
/* pages/my/set.wxss */
page {
  position: relative;
  height: 334rpx;
}
.swiperClass {
  border-bottom: 1px solid #a7aab5;
  margin: 0;
  margin-top: 10px;
}
.slide-image {
  width: 100%;
  height: 500px;
  // margin: auto;
  box-shadow: 10px 10px 5px #888888;
  overflow: hidden;
  border-radius: 10px;

  background-color: burlywood;

  position: relative;
}
image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}
image.quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}
.Ztext {
  color: black;
  width: 100%;
  text-align: center;
  font-size: 40px;
  /* z-index: 99999999999; */
}
.Xtext {
  color: #10d269;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  /* z-index: 99999999999; */
}
.Buttonlist {
  width: 100%;
  margin-top: 50px;
  font-size: 38px;
  .Btext {
    width: 100%;
    text-align: center;
  }
  .Blist {
    height: 280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
  }
  // .van-tag--large {
  //   font-size: 35px !important;
  // }
}
</style>